<template>
    <div class="place-order-wrapper">
        <div class="product-info-header">
          <div class="product-item">
            <div class="tab-content v-flex-row-start">
              <div class="curriculum-img">
                <img src="http://res.youtenet.com/bdbData/r/gou/u/201806/041349208m7b.jpg" alt="">
              </div>
              <div class="curriculum-introduce">
                <div>
                  <div class="curriculum-title">如何激励你的员工</div>
                  <div class="curriculum-sub-title">推动企业利润快速增长</div>
                  <div class="curriculum-sub-title">2626人学习</div>
                </div>
                <div class="curriculum-price v-flex-row-between">￥ 5000.00</div>
              </div>
            </div>
          </div>
        </div>
        <div class="discounts-info">
          <div class="dicounts-methods">
            <div class="discounts-title border-bottom">优惠方式</div>
            <div class="box-list v-flex-row-start border-bottom">
              <div class="check-box-icon">
                <div class="square"  @click="isCheck()" :class="{'checked':checked}"></div>
              </div>
              <div class="score-nothing">
                <span>积分0.00</span>
                <span>(没有可用)</span>
              </div>
            </div>
            <div class="check-voucher-wrapper v-flex-row-between border-bottom">
              <div class="box-list-check v-flex-row-start border-bottom" >
                <div class="check-box-icon">
                  <div class="square"  @click="isCheck()" :class="{'checked':checked}"></div>
                </div>
                <div class="score-nothing">
                  <span>代金券</span>
                  <span>(没有可用)</span>
                </div>
              </div>
              <div class="check-voucher v-flex-row-between" @click="toCheckCoupon">
                <div class="check-text">请选择代金券</div>
                <div class="arrow-right-wrapper"><img src="/static/image/cart/arrow-right.png" alt=""></div>
              </div>
            </div>
            <div class="box-list v-flex-row-start border-bottom">
              <div class="check-box-icon">
                <div class="square"  @click="isCheck()" :class="{'checked':checked}"></div>
              </div>
              <div class="score-nothing">
                <span>不使用任何优惠方式</span>
              </div>
            </div>
          </div>
        </div>
      <!--实际付款-->
        <div class="pay-ment-wrapper v-flex-row-between">
          <div class="pay-money"><span>实际付款：</span><span class="pay-money-text">￥ 5000.00</span></div>
          <div class="pay-button">立即付款</div>
        </div>
    </div>
</template>

<script>
  export default {
    name: "placeOrder",
    data () {
      return {
        checked:false,
      }
    },
    methods: {
      isCheck () {
        this.checked = ! this.checked;
      },
      // 选择代金券
      toCheckCoupon () {
        this.$router.push({
            path:'/pages/coupon/checkCoupon',
            query:{}
          })
      }
    }
  };
</script>

<style scoped lang="less">

  // 头部
  .product-item {
    margin-bottom:24rpx;
  }
  .tab-content {
    background-color:@bg_color;
    padding:26rpx 20rpx;
    .curriculum-img {
      width: 300rpx;
      height:170rpx;
      & > img {
        width: 300rpx;
        height:170rpx;
        border-radius:10rpx;
      }
    }
  }
  .curriculum-introduce {
    padding:0rpx 20rpx;
    box-sizing:border-box;
  }
  .curriculum-title {
    color:#333;
    font-size:@font_size_28;
    font-weight:bold;
  }
  .curriculum-sub-title {
    font-size:@font_size_24;
    color:#B3B4B5;
  }
  .curriculum-price {
    color:#FF5050;
    font-size:@font_size_32;
  }
  .vip-price{
    color:#FFBA00;
  }
  // -----
  // 底部立即付款部分
  .pay-ment-wrapper {
    width:100%;
    background-color:@bg_color;
    box-sizing:border-box;
    padding:0rpx 52rpx 0rpx 25rpx;
    height:104rpx;
    position:fixed;
    left:0;
    bottom:0;
  }
  .pay-button {
    width:200rpx;
    height:56rpx;
    line-height:56rpx;
    background:#2B80FF;
    color:#fff;
    text-align:center;
    border-radius:56rpx;
  }
  .pay-money {
    color:#333;
  }
  .pay-money-text {
    color:#FF5050;
    font-size:@font_size_32;
    font-weight:bold;
  }
  /*优惠方式*/
  .discounts-info {
    background-color:#fff;
  }
  .discounts-title {
    box-sizing:border-box;
    padding:27rpx 36rpx 30rpx 42rpx;
    color:#333;
    font-size: @font_size_26;
  }
  /*88*/
  .check-box-icon {
    padding-right:18rpx;
  }
  .square {
    width:20rpx;
    height:20rpx;
    border:1px solid #B3B4B5;

  }
  .checked {
    display:inline-block;
    width:20rpx;
    height:20rpx;
    // 背景图片用这个这样的 '/static/image/cart/checked.png'不显示，应该要用http://.........
    // background: url('/static/image/cart/checked.png') no-repeat center center;
    background-color:#2B80FF;
  }
  .box-list {
    padding:27rpx 36rpx 30rpx 42rpx;
    font-size:@font_size_24;
    color:#B3B4B5;
  }
  .check-voucher-wrapper {
    padding:27rpx 36rpx 30rpx 42rpx;
    font-size:@font_size_24;
    color:#B3B4B5;
  }
  .arrow-right-wrapper {
    & > img {
      width:12rpx;
      height:24rpx;
      vertical-align: middle;
    }
  }
  .check-text {
    padding-right:17rpx;
  }
</style>
